<template>
    <view class="page">
        <u-navbar title="设置" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar>
        <!-- 用户信息 -->
        <view class="user-info">
            <view class="address user-data" @click="policy(1)">
                <view class="title">
                    <text>隐私政策</text>
                </view>
                <view class="more">
                    <text class="content"></text>
                    <u-icon name="arrow-right"></u-icon>
                </view>
            </view>
            <view class="address user-data" @click="policy(2)">
                <view class="title">
                    <text>服务协议</text>
                </view>
                <view class="more">
                    <text class="content"></text>
                    <u-icon name="arrow-right"></u-icon>
                </view>
            </view>
            <view class="address user-data" @click="logout()">
                <view class="title">
                    <text>注销账号</text>
                </view>
                <view class="more">
                    <text class="content"></text>
                    <u-icon name="arrow-right"></u-icon>
                </view>
            </view>
        </view>
        <!-- 设置列表 -->
        <!-- #ifdef APP-PLUS || H5 -->
        <view class="setting-list">

            <view v-if="isShow" class="list" @click="onSetting('common')">
                <view class="title">
                    <text>通用</text>
                </view>
                <view class="more-content">
                    <text class="content">清除本地缓存等</text>
                    <u-icon name="arrow-right"></u-icon>
                </view>
            </view>
            <view class="list" @click="onSetting('about')">
                <view class="title">
                    <text>关于我们</text>
                </view>
                <view class="more-content">
                    <text class="content"></text>
                    <u-icon name="arrow-right"></u-icon>
                </view>
            </view>
        </view>
        <!-- #endif -->
        <!-- 退出 -->
        <view v-if="isShow" class="quit-login" @click="onQuitLogin">
            <text>退出登录</text>
        </view>
        <!-- 提示框 -->
        <DialogBox ref="DialogBox"></DialogBox>
        <!-- 提示框 -->
        <u-modal v-model="show" show-cancel-button :content="content" @confirm="confirm"></u-modal>
    </view>
</template>
<script>
import WebSocketUtil from '@/utils/websocket.js';
export default {
    data() {
        return {
            mobile: uni.getStorageSync('mobile'),
            UserInfo: {},
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            isShow: false,
            show: false,
            content: '是否要注销账号?若您在15日之内再次登录将取消注销！',
        };
    },
    onShow() {
        if (uni.getStorageSync('token')) {
            this.getUserInfo()
            this.isShow = true
        } else {
            this.isShow = false
        }
    },
    onLoad() {
        this.hidePhone();
    },
    methods: {
        /**
         * 用户信息点击
         */
        onBack() {
            uni.navigateBack();
        },
        onUserInfo() {
            uni.navigateTo({
                url: '/pagesA/setting/information'
            })
        },
        /**
         * 地址点击
         */
        onAddress() {
            uni.navigateTo({
                url: '/pagesA/setting/addressList',
            })
        },
        /**
         * 账户点击
         */
        onAccount() {
            uni.navigateTo({
                url: '/pagesA/my/modifyPhone',
            })
        },
        //隐藏部分手机号
        hidePhone() {
            let that = this
            let number = this.mobile; //获取到手机号码字段
            console.log('手机号', this.mobile)
            let mphone = number.substring(0, 3) + '******' + number.substring(9);
            that.mobile = mphone
        },
        getUserInfo() {
            this.UserInfo = uni.getStorageSync('userInfo')
            console.log(this.UserInfo, '用户信息')
        },
        /**
         * 设置列表点击
         * @param {String} type
         */
        onSetting(type) {
            switch (type) {
                case 'account':
                    uni.navigateTo({
                        url: '/pagesA/setting/accountSecurity'
                    })
                    break;
                case 'pay':
                    uni.navigateTo({
                        url: '/pages/PaymentPassword/PaymentPassword'
                    })
                    break;
                case 'invoice':
                    uni.navigateTo({
                        url: '/pagesA/setting/invoiceList'
                    })
                    break;
                case 'vip':
                    uni.navigateTo({
                        url: '/pagesA/setting/myMemberInterest'
                    })
                    break;
                case 'common':
                    uni.navigateTo({
                        url: '/pages/SettingCommon/SettingCommon'
                    })
                    break;
                case 'about':
                    uni.navigateTo({
                        url: '/pagesA/setting/aboutUs'
                    })
                    break;
            }
        },
        /**
         * 退出点击
         */
        onQuitLogin() {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要退出登录?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                WebSocketUtil.disconnectWebSocket()
                this.$store.dispatch('LogOut');
                setTimeout(() => {
                    uni.reLaunch({
                        url: '/pages/mine/index'
                    });
                    this.$message("已退出登录")
                }, 500);
            }).catch(err => {
                console.log(err);
            })
        },
        // 协议
        policy(e) {
            // #ifdef H5
            this.$navigateTo({
                url: "/pagesB/login/agreenment",
                params: {
                    type: e,
                },
            });
            // #endif
            // #ifndef H5
            let link = "https://h5.weilankangyang.com/#/pagesA/login/agreenmentB?type=" + e
            uni.navigateTo({
                url: '/pagesB/login/tool?link=' + encodeURIComponent(link)
            })
            // #endif
        },

        logout() {
            this.show = true
        },
        confirm() {
            this.show = false
            this.$store.dispatch('LogOut');
            this.$message("注销成功")
            setTimeout(() => {
                uni.reLaunch({
                    url: '/pages/mine/index'
                });
            }, 500);
        },
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

/* 用户信息 */
.user-info {
  width: 100%;
  // height: 300rpx;
  background-color: #ffffff;
  border-radius: 0 0 20rpx 20rpx;
  .user-data {
    display: flex;
    align-items: center;
    padding: 0 4%;
    height: 200rpx;
    .portrait-nickname {
      display: flex;
      align-items: center;
      width: 100%;
      height: 90%;
      .portrait {
        width: 140rpx;
        height: 140rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
      .nickname {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
        height: 140rpx;
        text {
          font-size: 28rpx;
          color: #222222;
        }
      }
    }
    .more {
      display: flex;
      align-items: center;
      .content {
        font-size: 28rpx;
        color: #959595;
        width: 120rpx;
      }
      .more {
        font-size: 24rpx;
        color: #959595;
        margin-left: 10rpx;
      }
    }
  }
  .address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    height: 100rpx;
    border-top: 2rpx solid #f6f6f6;
    .title {
      display: flex;
      align-items: center;
      text {
        font-size: 28rpx;
        color: #222222;
      }
    }
    .more {
      display: flex;
      align-items: center;
      .content {
        margin-right: 20rpx;
      }
      text {
        color: #959595;
        font-size: 28rpx;
      }
    }
  }
}

/* 设置列表 */
.setting-list {
  padding: 0 4%;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx auto;
  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    border-bottom: 2rpx solid #f6f6f6;
    .title {
      display: flex;
      align-items: center;
      text {
        font-size: 28rpx;
        color: #222222;
      }
    }
    .more-content {
      display: flex;
      align-items: center;
      .content {
        font-size: 28rpx;
        color: #959595;
      }
      .more {
        font-size: 24rpx;
        color: #959595;
        margin-left: 20rpx;
      }
    }
  }
}

/* 退出登录 */
.quit-login {
  position: fixed;
  left: 0;
  //   #ifdef APP-PLUS || H5
  bottom: 250rpx;
  // #endif
  //   #ifdef MP-WEIXIN
  bottom: 120rpx;
  // #endif
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92%;
  margin: 30rpx;
  height: 100rpx;
  background: #2e996f;
  border-radius: 20rpx;
  text {
    color: #fff;
    font-size: 30rpx;
  }
}
</style>
